<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="google-site-verification" content="yaeorbXgKPwp5BDegBtAJEHYWFEFE-BViWTj74gJPrw" />
<!--  -->
<link href="/css/default.css" type="text/css" rel="stylesheet" />
<!--  -->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/lang/cn.js"></script>
<script type="text/javascript" src="/js/mac/core.min.js"></script>
<title>JQuery MagicTabs 右键菜单</title>
<meta name="description" content="JQuery MagicTabs 右键菜单" />
<meta name="keywords" content="JQuery Tabs Plugin" />
<script type="text/javascript" src="/js/mac/webapp.min.js"></script>
<link href="/css/default/mac/tabs/tabs.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/mac/tabs.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#nav_jump').change(function(){
		location = './' + this.value + '.html';
	}).val('ctxMenu');
	$('.demoSource').val($('#demo').html());
});
</script>
</head>
<body>
<div id="head">
	<a href="/"><img src="/css/images/logo_s.png" alt="logo" /></a>
	<div class="title">BOARSOFT.COM</div>
	<div class="right">
		<div>
			<a href="/public/lang.php?l=en">English</a>
			|
			<a href="/public/lang.php?l=cn">简体中文</a>
			|
			<a href="http://activemq.apache.org/" target="_blank">ActiveMQ</a>
			|
			<a href="https://redis.io/" target="_blank">Redis</a>
			|
			<a href="http://www.jquery.com/" target="_blank">JQuery</a>
		</div>
	</div>
</div><div id="nav">
	<div id="nav_path">
		&nbsp;<a href="/">Home</a>
		&gt;
		<a href="/mac/js">Javascript</a>
		&gt;
		<a href="/mac/js/tabs">JQuery MagicTabs</a>
		&gt;
		JQuery MagicTabs 右键菜单	</div>
	<div id="nav_back">
		<a href="/mac/js/tabs/doc" target="_blank">文档</a>
		|
		<a href="javascript:history.back()">后退</a>
		|
		<a href="/mac/js#tabs">下载</a>
		|
		<select id="nav_jump">
			<option value="basic">JQuery MagicTabs 的基本使用</option>
			<option value="remote">JQuery MagicTabs 动态加载页面</option>
			<option value="custom">JQuery MagicTabs 自定义样式</option>
			<option value="ctxMenu">JQuery MagicTabs 右键菜单</option>
		</select>
		&nbsp;&nbsp;
	</div>
	<div class="clear"></div>
</div>
<div class="demoInfo">
	<h2 class="demoTitle">JQuery MagicTabs 右键菜单</h2>
</div>
<div id="demo" class="demoPanel"><link href="/css/default/mac/menu/menu.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/mac/contextMenu.min.js"></script>
<script type="text/javascript" src="/js/mac/menu.min.js"></script>
<script type="text/javascript">
$(function(){
	var dd = [], i=0;
	for (i=0; i<10; i++) {
		var a = {
			code: 'tab' + i,
			title: 'Subject ' + i,
			closeable: i>0,
			el: 'Content of Tab' + i // You can put anything here
		};
		dd.push(a);
	}
	var tabs = $('.tabs'), mu = $('#ctxMenu');
	tabs.mac('tabs', {
		items: dd,
		onShowTab: function(me, a, b, p){
			a.contextMenu({
				menu: mu,
				button: 3, //3: right click, 1: left click
				onPopup : function(el) {
					mu.enableItems();
					if (!p.closeable)
						mu.disableItems('close');
					return true;
				},
				offset: { x: 0, y: 0 }
			}, function(action, el, pos) {
				var c = el.attr('name');
				switch (action) {
				case 'close':
					me.closeTab(c);
					break;
				case 'closeOthers':
					me.closeTabs(c);
					break;
				case 'closeAll':
					me.closeTabs();
					break;
				}
				return false;
			});
		}
	}).selectFirst();
	var atBtn = $('#addTabBtn').click(function(){
		var a = tabs.addTab({
			code: 'tab' + i,
			title: 'Subject ' + i,
			closeable: i>0,
			el: 'Content of Tab' + i // You can put anything here
		});
		tabs.select('tab' + i);
		i++;
	});
});
</script>
<div class="toolbar">
	<div class="item button" id="addTabBtn">Add Tab</div>
</div>
<div class="clear"></div>
<div class="tabs" style="height: 380px; margin: 4px;"></div>
<ul id="ctxMenu" class="contextMenu">
	<li action="close" class="ui-helper-clearfix">
		<span style="display: block">
			<span class="icon icon-newwin"></span>
			<span class="text">Close</span>
		</span>
	</li>
	<li action="closeOthers" class="ui-helper-clearfix">
		<span style="display: block">
			<span class="icon icon-newwin"></span>
			<span class="text">Close Others&nbsp;</span>
		</span>
	</li>
	<li action="closeAll" class="ui-helper-clearfix">
		<span style="display: block">
			<span class="icon icon-newwin"></span>
			<span class="text">Close All</span>
		</span>
	</li>
</ul></div>
<textarea class="demoSource" wrap="off"></textarea>
<iframe src="/mac/js/related.php" class="related"></iframe>
<div id="foot">
Copyright © 2011. All rights reserved&nbsp;&nbsp;蜀ICP备11014774号-1&nbsp;&nbsp;
QQ: 7213571&nbsp;&nbsp;E-mail: pyh_jerry@163.com&nbsp;&nbsp;
<!-- 
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ffc0b0282216be3d16055855d8c0e72d9' type='text/javascript'%3E%3C/script%3E"));
</script>
&nbsp;&nbsp;
 -->
</div></body>
</html>
